<template>
	<view>
		<view class="swiper-view-box" @touchstart.stop="" >
			<view class="swiper-view-inner-box" :style="{height:imgHeight-20+'px'}"></view>
			<swiper class="bannerSwiper" :style="{height:imgHeight+'px'}" indicator-dots="true" indicator-color="white" indicator-active-color="#D44439">
				<swiper-item v-for="(item,index) in imgList" :key="index">
					<image :src="item" v-if="index==0" @load="imgLoad($event)"></image>
					<image :src="item" v-if="index!=0"></image>
				</swiper-item>
			</swiper>
		</view>
		<!--推荐歌单 -->
		<view class="recommend">
			<view class="title">推荐歌单</view>
			<view class="recommend-list">
				<view class="item" v-for="(item,index) in recommendList" :key="index">
					<view class="item-img">
						<!-- 耳机图标与播放量-->
						<view class="erji">
							<image src="../../static/erji.svg" ></image>{{item.playCount}}万
						</view>
						<image :src="item.picUrl" mode="widthFix"></image>
					</view>
					<view class="item-desc">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!--最新音乐 -->
		<view class="newSong">
			<view class="title">最新音乐</view>
			<view class="newSong-list">
				<view class="item" v-for="(item,index) in newSongList" :key="index" :data-m_id="item.id">
					<view class="left">
						<view class="songName">{{item.name}}</view>
						<view class="author">{{item.song.artists[0].name}}--{{item.song.album.name}} </view>
					</view>
					<view class="right">
						<image src="../../static/play.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ApiConfig from "../../config/ApiConfig.js";
	export default {
		data() {
			return {
				imgHeight:"",
				imgList:[
					"../../static/item1.jpg",
					"../../static/item2.jpg",
					"../../static/item3.jpg",
					"../../static/item4.jpg",
				],
				recommendList:[],
				newSongList:[]
			};
		}, 
		created(){
			Promise.all([this.getRecommendList(),this.getNewSongList()]).then(res=>{
				let recommendList=res[0];
				let newSongList=res[1];
				this.recommendList=recommendList.result.slice(0,6).map(item=>{
					item.playCount=parseInt(item.playCount/1000);
					return item;
				});
				this.newSongList=newSongList.result.slice(0,10);
			});
		},
		methods:{
			imgLoad(event){
				var imgWidth=event.detail.width;
				var imgHeight=event.detail.height;
				var screenWidth=uni.getSystemInfoSync().screenWidth;
				this.imgHeight=imgHeight*(screenWidth/imgWidth);
				console.log(this.imgHeight); 
			},
			getRecommendList(){
				return new Promise((resolve,reject)=>{
					uni.request({
						url:`${ApiConfig.baseUrl}/personalized`,
						success: (res) => {
							resolve(res.data);
						},
						fail: (err) => {
							reject(err);
						}
					})
				});
			},
			getNewSongList(){
				return new Promise((resolve,reject)=>{
					uni.request({
						url:`${ApiConfig.baseUrl}/personalized/newsong`,
						success: (res) => {
							resolve(res.data);
						},
						fail: (err) => {
							reject(err);
						}
					})
				});
			}
		}
	} 
</script>

<style lang="scss" scoped>
	@import "../../assets/scss/common.scss";
	.swiper-view-box{
		box-sizing: border-box;
		padding:0px 20upx;
		position: relative;
	}
	.swiper-view-inner-box{
		background-color: $primaryColor;
		position: absolute;
		width: 100%;
		left: 0px;
		top: 0px;
	}
	.bannerSwiper{
		width: 100%;
		// overflow:hidden;
		swiper-item{
			>image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
	.recommend{
		.title{
			font-size: 32upx;
			font-weight: bold;
			@include flexbox(){
				align-items: center;
				height: 60upx;
			};
			padding-left:20upx;
			border-left: 6upx solid $primaryColor;

		}
		.recommend-list{
			@include flexbox();
			justify-content: space-around;
			flex-wrap: wrap;
			>.item{
				margin-top: 10upx;
				width: 32%;		
				>.item-img{
					position: relative;
					width: 100%;
					>image{
						width: 100%;
						display: block;
					}
					>.erji{
						position: absolute;
						@include flexbox();
						align-items: center;
						right: 5upx;
						top: 5upx;
						font-size: 24upx;
						color: white;
						>image{
							width: 24upx;
							height: 24upx;
						}
					}
				}
				>.item-desc{
					font-size: 24upx;
					text-align: center;
				}
			}
		}
		
	}
	.newSong{
		.title{
			font-size: 32upx;
			font-weight: bold;
			@include flexbox(){
				align-items: center;
				height: 60upx;
			};
			padding-left:20upx;
			border-left: 6upx solid $primaryColor;
		}
		>.newSong-list{
			@include flexbox();
			padding: 0px 10upx;
			flex-wrap: wrap;
			>.item{
				height: 90upx;
				@include flexbox();
				width: 100%;
				border-bottom: 1px solid #ececec ;
				>.left{
					@include flexbox(column);
					justify-content: space-around;
					flex:1;
					.songName{
						font-size: 28upx;
					}
					.author{
						font-size: 24upx;
						color: gray;
					}
				}
				>.right{
					width: 100upx;
					@include flexbox();
					align-items:center;
					>image{
						width: 70upx;
						height: 70upx;
						display: block;
					}
				}
				
			}
		}
	}
</style>

